<template>
    <!-- 积分页面 -->
    <view class="jf-container">
        <navigator open-type="navigateBack"></navigator>
        <view class="top-bg">
            <view class="jfbgbox">
                <image src="../../static/assets/img/jifenBG.png" mode="widthFix"></image>
            </view>
            <view class="titleTop">
                <image src="../../static/assets/img/return@2x.png" class="titleimg" mode="widthFix" @tap="goBack"></image>
                <text>积分详情</text>
                <text></text>
            </view>
            <view class="rh-jf">
                <text class="edit-box" @tap="showRule">如何获取积分?</text>
            </view>
            <view class="jfTabox">
                <view class="jfTabox-list">
                    <view class="dqjf">当前积分</view>
                    <view class="jfnumber">{{ myJf.integraBalance || 0 }}</view>
                    <view class="dqjf">累计已兑换 {{ myJf.integraUsedMoney || 0 }}积分</view>
                    <view class="jfmx" @tap="goDetailUrl">积分明细</view>
                </view>
                <view class="jfTabox-list">
                    <image class="jifen_card" src="../../static/assets/img/jifen_card.png" mode="widthFix" alt=""></image>
                </view>
            </view>
        </view>
        <view class="jfdh" style="display: none">
            <view class="jf-title">积分兑换</view>
            <view class="jfdh-list">
                <view style="margin-top: 24rpx" v-for="(item, index) in jfdhList" :key="index">
                    <view style="width: 310rpx">
                        <image :src="item.url" style="width: 280rpx; height: 280rpx" mode="widthFix"></image>
                    </view>

                    <view class="jfdh-list-name">{{ item.name }}</view>

                    <view class="jf-box">
                        <text :class="item.price != '' ? 'jfdh-list-price' : 'jfdh-list-wu'">
                            {{ item.price != '' ? item.price : '即将开放' }}
                            <text style="font-size: 20rpx">{{ item.price != '' ? '积分' : '' }}</text>
                        </text>
                        <text class="jfdh-list-isdh" @tap="alertShow">{{ item.isdh }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view>
            <van-popup round v-model="showRulePop" @close="closeRule">
                <view class="rules">
                    <view class="rule-title">积分规则</view>
                    <view>
                        <view class="rule-title2">什么是邻里停积分？</view>
                        <view class="rule-content">积分是邻里停用户通过日常打卡、分享车位、支付停车费等行为获得的累计积分值，积分可在积分商城兑换丰富的礼品或停车券。</view>
                    </view>
                    <view class="rh-jf-content">
                        <view class="rule-title2">如何获得积分？</view>
                        <view class="rule-content">获得积分的方式如下，规则会根据实际情况动态调整，最终解释权归邻里停所有。</view>
                    </view>
                    <view class="qd-content">
                        <view class="rhombus-list" style="height: 32rpx">
                            <text class="rhombus"></text>
                            <view class="rhombus-name">每日签到：+10分</view>
                        </view>
                        <view class="rhombus-list" style="height: 70rpx">
                            <text class="rhombus"></text>
                            <view class="rhombus-name">共享车位（新发布或者当天有车位上架状态）：+80分/天</view>
                        </view>
                        <view class="rhombus-list" style="height: 32rpx">
                            <text class="rhombus"></text>
                            <view class="rhombus-name">支付包月：+200分/笔</view>
                        </view>
                    </view>
                </view>
                <view class="rule-know" @tap="closeRule">我知道了</view>
            </van-popup>
        </view>
    </view>
</template>

<script>
import util from './../../utils/util.js';
import api from './../../utils/api.js';
export default {
    data() {
        return {
            jfdhList: [
                // {url:'/assets/img/pic5.png',name:'华数生活+100M宽带1年',price:99999,isdh:"兑换"},
                // {url:'/assets/img/pic4.png',name:'华数生活+有线电视宽带',price:79999,isdh:"兑换"},
                // {url:'/assets/img/pic3.png',name:'30元三网话费兑换券',price:12999,isdh:"兑换"},
                // {url:'/assets/img/pic2.png',name:'10元三网话费兑换券',price:4999,isdh:"兑换"},
                // {url:'/assets/img/pic1.png',name:'停车费抵扣券',price:'',isdh:""},
                // {url:'/assets/img/pic.png',name:'7折月卡抵扣券',price:'',isdh:""},
            ],
            showRulePop: false,
            myJf: {
                integraBalance: '',
                integraUsedMoney: ''
            }
        };
    },
    onShow: function () {
        if (uni.getStorageSync('AUTHORIZATION')) {
            const unionId = uni.getStorageSync('unionId');
            this.getMyIntegra(unionId);
        }
    },
    methods: {
        alertShow() {
            //提示积分不足
            uni.showToast({
                title: '积分不足',
                icon: 'none'
            });
        },

        goBack() {
            //返回上一级
            uni.navigateBack({
                delta: 1
            });
        },

        getMyIntegra(unionId) {
            //我的积分
            util.request(api.getMyIntegra + '?unionId=' + unionId, 'get').then((res) => {
                if (res.code == 0) {
                    this.setData({
                        myJf: res.data
                    });
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                }
            });
        },

        goDetailUrl() {
            uni.navigateTo({
                url: '../jfdetails/jfdetails'
            });
        },

        //展示积分规则
        showRule() {
            this.setData({
                showRulePop: true
            });
        },

        closeRule() {
            //关闭积分规则
            this.setData({
                showRulePop: false
            });
        }
    }
};
</script>
<style>
@import './coupon.css';
</style>
